<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<style>
table {
	display: table;
	border-collapse: collapse;
}

body, table, input, textarea {
	font-family: cat;
	font-size: 20px;
}

a {
	text-decoration: none;
}

textarea {
	resize: none;
}

@font-face {
	font-family: cat;
	src: url('whitecat.eot'); /* IE9 호환성 보기 */
	src: url('whitecat.eot?iefix') format('eot'), /* IE6-IE8 */  
		 url('whitecat.woff') format('woff'), /* Modern Browsers */  
		 url('resources/whitecat.ttf') format('truetype');
	/* Safari, android, iOS */;
}

h2 {
	font-size: xx-large;
}


table {
white-space: normal;
line-height: normal;
font-weight: normal;
font-size: x-large;
font-variant: normal;
font-style: normal;
color: -webkit-text;
text-align: start;
border: medium;
text-align: start;
}

.ajaxLayer {
	display: none;
	position: fixed;
	_position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 100;
}

.ajaxLayer .ajaxLayer-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #DBDBDB;
	opacity: .5;
	filter: alpha(opacity = 50);
}

.ajaxLayer .ajaxLayerImg {
	display: block;
}

.ajaxLayerImg {
	display: none;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 128px;
	height: auto;
	z-index: 10;
}
</style>
<script src="/resources/js/jquery-2.1.1.min.js"></script>
<script src="/resources/js/jquery.form.js"></script>
<script src="/resources/js/jquery.cookie.js"></script>
<head>
<title>로그인 화면</title>
<link type="text/css" rel="stylesheet"
	href="/resources/common/common.css">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<script>	
	function IdCheck() {
		openAjaxLayer();
		var message = $('#user_id').val();
		$.ajax({
			type : "POST",
			url : "/user/idCheck",
			data : {
				message : message
			},
			dataType : "json"
		//contentType: "application/json; charset=utf-8"
		}).done(function(msg) {
			$('.ajaxLayer').hide();
			//alert(msg.message);
			//var html = '<div>'+msg.message+'</div>';
			if(msg=="이미 사용중인 아이디 입니다.")
			{
				$('#test_Div').html("<font color='red'>" + msg + "</font>");
			}else{
				$('#test_Div').html("<font color='green'>" + msg + "</font>");
			}	
		});
	}
	
	function JoinCheck() {
		openAjaxLayer();
		var message = $('#user_id').val();
		$.ajax({
			type : "POST",
			url : "/user/Insert",
			data : {
				message : message
			},
			dataType : "json"
		//contentType: "application/json; charset=utf-8"
		}).done(function(msg) {
			$('.ajaxLayer').hide();
			//alert(msg.message);
			//var html = '<div>'+msg.message+'</div>';
			if(msg=="이미 사용중인 아이디 입니다.")
			{
				$('#test_Div').html("<font color='red'>" + msg + "</font>");
			}else{
				$('#test_Div').html("<font color='green'>" + msg + "</font>");
			}	
		});
	}
	function openAjaxLayer() {
		var ajaxLayer = $('.ajaxLayerImg');
		$('.ajaxLayer').show();
		if (ajaxLayer.outerHeight() < $(document).height())
			ajaxLayer.css('margin-top', '-' + ajaxLayer.outerHeight() / 2
					+ 'px');
		else
			ajaxLayer.css('top', '0px');
		if (ajaxLayer.outerWidth() < $(document).width())
			ajaxLayer.css('margin-left', '-' + ajaxLayer.outerWidth() / 2
					+ 'px');
		else
			ajaxLayer.css('left', '0px');
		return false;
	}
	</script>

<body>
		<jsp:include page="main_header.jsp"></jsp:include><br>
	<div id="container" align="center" class="body">
		<table height="50px"><h2>회원가입</h2></table>
		&nbsp;
		<form action="/user/Insert" method="post">
		<table width="40%" border="0" cellspacing="1" cellpadding="5" >
		<div class="ajaxLayer">
			<div class="ajaxLayer-bg"></div>
				<div class="ajaxLayerImg">
					<img src="/resources/image/ajax-loader.gif" width="128" height="128" />
				</div>
			</div>
		
         <!-- 아이디 -->
			<tr>
			
				<td width="127" height="50" align="center" class="txt_pro" nowrap=""
					bgcolor="#F6F6F6">아이디</td>
				<td width="510" bgcolor="#FFFFFF">
					<table cellpadding="0" cellspacing="0">
						<tbody>
							<tr>
								<td><input type="text" size="23" name="user_id" id="user_id" class="input01" ></td>
								<td style="display: block">&nbsp;
									<img
									src="http://img0001.echosting.cafe24.com/front/type_b/image/member_register/7.gif"
									align="absmiddle"
									onclick="IdCheck();"
									style="cursor: pointer">
								</td>
								<td><div id="test_Div"></div></td>
							</tr>
						</tbody>
					</table>
				</td>
			</tr>
			
			<!-- 			비밀번호 -->
			<tr>
				<td width="127" height="50" align="center" class="txt_pro" bgcolor="#F6F6F6">비밀번호</td>
				<td width="850" bgcolor="#FFFFFF">
				<input type="password" size="23" name="password" class="input01" maxlength="16">
					(영문 대소문자/숫자/특수문자 중 2가지 이상 조합, 10자~16자)</td>
			</tr>

			<!-- 이름 -->
			<tr style="display:">
                      <td height="10"height="50"height="50" align="center" bgcolor="#F6F6F6" width="127" class="txt_pro">이름</td>
                      <td height="10" height="50" bgcolor="#FFFFFF" width="510">
                          <input type="text" size="23" maxlength="20" id="name" name="name" class="input01" value="">
                      </td>
                    </tr>

			
			<!-- 주소 -->
			
			<tr style="display:">
                      <td height="50" align="center" bgcolor="#F6F6F6" width="127" class="txt_pro">주소</td>
                      <td height="50" bgcolor="#FFFFFF" width="510">
                        <table width="510" border="0" cellspacing="0" cellpadding="0">
                          <tbody>
                            <tr>
                            <td height="50">
                              <input type="text" size="50" name="postcode" value="" class="input01">
                              우편번호</td>
                          </tr>
                          <tr>
                            <td height="50">
                              <input type="text" size="50" name="address" value="" class="input01">
                              나머지주소</td>
                          </tr>
                        </tbody></table>
                      </td>
                    </tr>
                    
                    <!-- 휴대전화 -->

				
				<tr style="display:">
                      <td height="50" align="center" bgcolor="#F6F6F6" width="127" class="txt_pro">휴대전화</td>
                      <td height="50" bgcolor="#FFFFFF" width="510">
                        <input type="text" size="40" style="font-size: large;" name="phone" value="" class="input01" maxlength="13" placeholder="'-'표시는 생략해주세요!">
	                      </td>
                    </tr>
				
				<!-- 성별 -->
				
				<tr>
          <td width="127" height="50"align="center" class="txt_pro" nowrap="" bgcolor="#F6F6F6">성별</td>
          <td bgcolor="#FFFFFF" colspan="3">
            <input type="radio" name="sex" value="0"> 남자
            <input type="radio" name="sex" value="1"> 여자 
          </td>
        </tr>
				
				<!-- 이메일 -->
				
				
				<tr style="display:">
                      <td height="50" align="center" bgcolor="#F6F6F6" width="127" class="txt_pro">이메일</td>
                      <td height="50" bgcolor="#FFFFFF" width="510">

                        <table width="510" border="0" cellspacing="0" cellpadding="0">
                        <tbody><tr>
                            <td height="26"><input type="text" size="50" name="email" value="" class="input01"></td>
                            
                            <td width="300">&nbsp;</td>
                        </tr>
                        <tr>
                            <td height="50" colspan="5"> <img src="http://img0001.echosting.cafe24.com/front/type_b/image/member_register/9.gif" align="absmiddle">주문 및 배송확인 정보 등이 E-mail로 발송되므로<br> 반드시 수신가능한 E-mail 주소를 입력하여주십시오.</td>
                        </tr>
                        </tbody></table>
                      </td>
                    </tr>
					
		</table>
		
		
		
		<td align="center">
                <input type="image" onclick="JoinCheck()"  src="http://file.boom2004.cafe24.com/Design/skin_3/member_regist_c_3_image_url_11.gif" hspace="2"><input type="hidden" name="jf_nickname_check_use" id="jf_nickname_check_use" value="F">
<input type="hidden" name="nickname_check_use_flag" id="nickname_check_use_flag" value="F">
                
                </td>
		</form>
		&nbsp
		<table style="height: 100px;"></table>
		</div>
<jsp:include page="main_bottom.jsp"></jsp:include>
</body>
</html>